<template>
	<!-- :style="{height:height,width:width,marginTop:top}" -->
	<view class="container">
		<swiper class="swiper" :duration='1500' :interval="2000" :autoplay="true" circular>
			<swiper-item v-for='(v,i) in bannerList' :key="v.id">
				<img :src="v.url" alt="">
				<!-- <view class="swiper-item uni-bg-blue">{{v}}</view> -->
			</swiper-item>
		</swiper>
		<view class="tip">
			<view class="tip-box" v-for="(v,i) in tip" :key='v.id'>
				<!-- <uni-icons  :type='v.icon' style='color:red'></uni-icons> -->
				<text :class="['t-icon',v.icon]"></text>
				<text>{{v.title}}</text>
			</view>
		</view>
		<!-- 功能服务 -->
		<view class="convenient">
			<view class="convenient-title">功能服务
				<text class="more">更多</text>
			</view>
			<view class="convenient-box">
				<view class="" v-for="(v,i) in services" :key="i">
					<text :class="['t-icon',v.icon]"></text>
					<view>{{v.title}}</view>
				</view>
			</view>
		</view>

		<view class="smartProperty">
			<view class="smartProperty-top">
				<text class="t-icon t-icon-laba-copy"></text>
				<view class="hello">欢迎访问智慧物业</view>
			</view>
			<view class="smartProperty-box">
				<view class="smartProperty-left">
					<view class="smartProperty-title">
						报事报修
						<text>一键维修</text>
					</view>
					<img src="/static/555.jpg" alt="">
				</view>
				<view class="smartProperty-left">
					<view class="smartProperty-title">
						联系物业
						<text>一键搞定</text>
					</view>
					<img src="/static/666.jpg" alt="">
				</view>

			</view>
		</view>
		<view class="community-activity">
			<view class=".community-title">
				社区活动
			</view>
			<view class="community-box">
				<view class="img-box">
					<img src="/static/777.jpg" alt="">
				</view>
				<view class="community-text">
					暂无数据哦~
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				href: 'https://uniapp.dcloud.io/component/README?id=uniui',
				height: '',
				top: '',
				width: '',
				ml: '',
				bannerList: [{
						url: '/static/banner1.png',
						id: 1
					},
					{
						url: '/static/banner2.jpg',
						id: 2
					}
				],
				services: [{
						icon: 't-icon-shenghuojiaofei',
						title: '生活缴费'
					},
					{
						icon: 't-icon-a-HouseForRent',
						title: '房屋费'
					},
					{
						icon: 't-icon-tingchechangguanli',
						title: '停车费'
					},
					{
						icon: 't-icon-fangke',
						title: '访客通行'
					},
				],
				tip: [{
						id: 1,
						icon: 't-icon-laba',
						title: '社区公告',
						color: 'red'
					},
					{
						id: 2,
						icon: 't-icon-tianjiachengyuan',
						title: '家庭成员',
						color: 'green'
					},
					{
						id: 3,
						icon: 't-icon-yijiankaimenmdpi',
						title: '远程开门',
						color: 'red'
					}
				],
				convenient: [{

				}]
			}
		},
		methods: {
			getMenuButton() {
				// #ifdef MP-WEIXIN
				this.height = (uni.getMenuButtonBoundingClientRect().height) + 'px'
				this.width = (uni.getMenuButtonBoundingClientRect().left - 7) + 'px'
				this.top = (uni.getMenuButtonBoundingClientRect().top) + 'px'
				this.ml = 7 + 'px'
				// #endif
				// #ifdef H5
				this.height = 20 + 'px'
				this.width = 95 + '%'
				this.top = 0 + 'px'
				// #endif

			}
		},
		created() {
			this.getMenuButton()
		}
	}
</script>

<style lang="less">
	.container {
		width: 100%;
		height: 100%;
		font-size: 28rpx;
		background: #eee;
		overflow-y:auto ;
	}

	.swiper {
		width: 95%;
		height: 300rpx;
		margin: auto;
		background: pink;
		margin-top: 20rpx;

		swiper-item {
			width: 100%;
			height: 100%;
			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.tip {
		width: 95%;
		margin: auto;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;

		.tip-box {
			width: 28.5%;
			height: 100rpx;
			background: white;
			line-height: 100rpx;
			text-align: left;
			padding-left: 20rpx;
			display: flex;
			align-items: center;

			.t-icon {
				width: 48rpx;
				height: 48rpx;
			}


		}
	}

	.convenient {
		width: 95%;
		margin: auto;
		margin-top: 20rpx;
		background: white;
		// padding: 20rpx;

		.convenient-title {
			width: 95%;
			height: 100rpx;
			font-size: 32rpx;
			font-weight: 600;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #000;
			margin: auto;
			margin-top: 25rpx;

			.more {
				color: #ccc;
				font-size: 24rpx
			}
		}

		.convenient-box {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;

			>view {
				width: 25%;
				text-align: center;
				margin-bottom: 20rpx;

				.t-icon {
					width: 48rpx;
					height: 48rpx;
				}
			}

		}
	}

	.smartProperty {
		width: 95%;
		margin: auto;
		background: white;
		margin-top: 20rpx;
		padding: 5rpx;

		.smartProperty-top {
			width: 95%;
			height: 90rpx;
			margin: auto;
			background: #fffbe8;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			position: relative;
			overflow: hidden;

			text {
				margin: 0 20rpx;
			}

			.hello {
				position: absolute;
				display: inline;
				animation: tranLate 4s linear infinite;
				color: #bf8d36;
			}
		}
		@keyframes tranLate {
			0% {
				translate: -25rpx
			}

			100% {
				translate: 800rpx;
			}
		}
		.smartProperty-box {
			width: 95%;
			margin: auto;
			display: flex;
			margin-top: 15rpx;
			.smartProperty-left {
				width: 46%;
				height: 170rpx;
				background: #f6f6f6;
				margin-right: 20rpx;
				display: flex;
				margin-bottom: 20rpx;
				.smartProperty-title {
					font-size: 32rpx;
					font-weight: 600;
					display: flex;
					flex-direction: column;
					justify-content: center;
					padding-left: 10rpx;
					text {
						font-size: 28rpx;
						color: #999;
						margin-top: 10rpx;
					}
				}
				img {
					flex: 1;
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.community-activity {
		width: 95%;
		margin: auto;
		margin-top: 20rpx;

		.community-title {
			font-weight: 600;
			font-size: 32rpx;
		}

		.community-box {
			width: 100%;
			height: 500rpx;
			border-radius: 20px;
			background: white;
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.img-box {
				width: 400rpx;
				height: 300rpx;
				margin: auto;

				img {
					width: 100%;
					height: 100%;
				}

			}
			.community-text{
				text-align: center;
			}
		}
	}
</style>